<template>
    <div>
        <div class="my_balance">
            <span>我的资产</span>
            <p>{{$store.state.balanceFund + $store.state.balanceManage}}</p>
        </div>
        <div style="padding: 0 .2rem;">
            <div class="my_wallet" style="">
                <router-link to="/m/fund-wallet" class="rel_div">
                    <h3>资金钱包</h3>
                    <div class="pos_div">
                        <p>{{$store.state.balanceFund}}</p>
                    </div>
                </router-link>
                <router-link to="/m/manage-wallet" class="rel_div">
                    <h3>理财钱包</h3>
                    <div class="pos_div">
                        <p>{{$store.state.balanceManage}}</p>
                    </div>
                </router-link>
            </div>
            <div class="my_production">
                <p class="my_production_top">
                    <span>精选理财</span>
                    <span>收益稳 省心选</span>
                </p>

                <template v-for="production in productionData">
                    <el-card :body-style="{ padding: '0px' }">
                        <div class="card_title">
                            <span>{{production.name}}</span>
                            <router-link :to="{path:'/m/manage-buy', query:production}">
                                <el-button type="text">买入</el-button>
                            </router-link>
                        </div>
                        <div class="card_body">
                            <el-button disabled type="text">{{production.moneyRate}}%</el-button>
                            <el-button disabled type="text">{{production.period}}天</el-button>
                        </div>
                        <div class="card_footer">
                            <el-button disabled type="text">七日年化</el-button>
                            <el-button disabled type="text">{{production.startAmount}}起投</el-button>
                        </div>
                    </el-card>
                </template>

            </div>
        </div>

    </div>
</template>

<script>

    import {mapMutations, mapActions} from 'vuex'

    export default {
        name: "Wallet",
        data() {
            return {
                fundData: [],
                manageData: [],
                balanceFund: 0,
                balanceManage: 0,
                productionData: [],
            }
        },
        computed: {},
        mounted() {
            this.requestGetMyBalance();
            this.requestGetProduction();
        },
        methods: {
            requestGetMyBalance() {
                this.requestAxios.requestWeb('post', webUserBalanceApi + '/my_balance.do', null, (response) => {
                    console.log('my_balance == ', response);
                    let balanceFund = 0;
                    let balanceManage = 0;
                    let fundData = [];
                    let manageData = [];
                    for (let i = 0; i < response.data.length; i++) {
                        if (response.data[i].type == 1) {
                            fundData.push(response.data[i]);
                            balanceFund += response.data[i].total;
                        } else if (response.data[i].type == 2) {
                            manageData.push(response.data[i]);
                            balanceManage += response.data[i].total;
                        }
                    }

                    this.fundData = fundData;
                    this.manageData = manageData;
                    this.balanceFund = balanceFund;
                    this.balanceManage = balanceManage;

                })

            },
            requestGetProduction() {
                this.requestAxios.requestWeb('post', '/products.do', null, (response) => {
                    // console.log('products ==', response);
                    this.productionData = response.data;
                })
            }
        }
    }
</script>

<style scoped>
    .my_balance {
        height: 1.6rem;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0 .3rem;
        color: #fff;
        background: linear-gradient(#e47307, #dc5405);
        font-weight: bold;
        box-shadow: 5px 0 10px #ddd;
    }

    .my_balance p {
        font-size: .32rem;
    }

    .my_wallet {
        display: flex;
        justify-content: space-between;
        margin-top: .3rem;
    }

    .my_wallet .rel_div {
        position: relative;
        text-align: center;
        width: 48%;
        height: 1.8rem;
        border-radius: .1rem;
        box-shadow: 3px 3px 10px 0 #bac4d1;
    }

    .my_wallet .rel_div:first-child {
        background: url("../../../../assets/img/m/balanceFund.png");
        background-size: 100%;
    }

    .my_wallet .rel_div:last-child {
        background: url("../../../../assets/img/m/balanceManage.png");
        background-size: 100%;
    }

    .my_wallet h3 {
        text-align: right;
        padding: .15rem;
        color: #fff;
        font-weight: bold;
    }

    .my_wallet p {
        color: #fff;
        font-weight: bold;
    }

    .my_wallet .pos_div {
        position: absolute;
        width: 90%;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }

    .my_production {
        padding-top: .3rem;
    }

    .my_production_top {
        padding-left: .5rem;
    }

    .my_production_top span:first-child {
        font-size: .35rem;
        font-weight: bold;
        padding-right: .15rem;
    }

    .my_production_top span:last-child {
        color: #666;
    }


    .my_production .el-card {
        padding: .4rem .2rem;
        margin: .35rem 0;
        border-left: 3px solid #e07f27;
        box-shadow: 0 2px 10px 0 #d6d6d7;
    }

    .my_production .el-card:last-child {
        margin-bottom: 1.5rem;
    }

    .my_production .card_title {
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-weight: bold;
    }

    .my_production .card_title .el-button {
        padding: .03rem .2rem;
        border-radius: .3rem;
        border: 2px solid #ebad7a;
        color: #ebad7a;
        margin-bottom: .1rem;
        font-weight: bold;
        font-size: .2rem;
    }

    .my_production .card_body, .my_production .card_footer {
        display: flex;
    }

    .my_production .card_body .el-button, .my_production .card_footer .el-button {
        padding: .1rem 0;
    }

    .my_production .card_body .el-button:first-child, .my_production .card_footer .el-button:first-child {
        min-width: 30%;
        text-align: left;
        margin-right: .3rem;
    }

    .my_production .card_body .el-button:first-child {
        color: #ed8207;
        font-weight: bold;
        font-size: .32rem;
    }

    .my_production .card_body .el-button:last-child {
        color: #333;
        font-weight: bold;
        font-size: .32rem;
    }

    .my_production .el-button.is-disabled {
        color: #999;
    }


</style>
